<script type="text/ng-template" id="interaction/ImageClickInput">
  <div ng-if="!imageUrl">
    [Select an image to display]
  </div>

  <div style="position: relative;" ng-if="imageUrl">
    <img 
      ng-src="<[imageUrl]>"
      class="oppia-image-click-img"
      ng-click="onClickImage($event)"
      ng-mousemove="onMousemoveImage($event)" />
    <div ng-if="highlightRegionsOnHover">
      <div
        ng-repeat="region in allRegions"
        style="
          height: <[getRegionDimensions($index).height]>px; 
          width: <[getRegionDimensions($index).width]>px; 
          left: <[getRegionDimensions($index).left]>px; 
          top: <[getRegionDimensions($index).top]>px; 
          pointer-events: none; 
          position: absolute; 
          display: <[getRegionDisplay(region.label)]>;
          background: rgba(0,0,255,0.5); 
          z-index: 999;
        ">
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="response/ImageClickInput">
  <div ng-mouseover="onMouseoverDiv($event)"
    ng-mouseout="onMouseoutDiv($event)"
    ng-mousemove="onMousemoveDiv($event)">
    (Clicks on image)
  </div>
</script>
